<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="checkbox" name=" aa " value="0" />0
        <input type="checkbox" name=" aa " value="1" />1
        <input type="checkbox" name=" aa " value="2" />2
        <input type="checkbox" name=" aa " value="3" />3
        <input type="button" onclick="abc()" value="提 交" />
        <div id="allselect"></div>
    </div>
    <div>
        <form name="a">
            <select name="a" size="1" id="a" onchange="getOptionVal()">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>
    </div>
    <div>
        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
        确认密码：<input type="password" id="password1"/><br/>
        <button id="btnSubmit" type="button" onclick="register()">提交</button><br/>
    </div>
    <table>
        <tr>
            <td>留言</td>
            <td id="number"> 0 </td>
        </tr>
        <tr>
            <td colspan=2>
                <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
            </td>
        </tr>
    </table>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    // 7、题目描述
    // 用jQuery编程实现获取选中复选框值的函数abc
    // HTML结构如下：
    // <div>
    //     <input type="checkbox" name="aa" value="0" />0
    //     <input type="checkbox" name=" aa " value="1" />1
    //     <input type="checkbox" name=" aa " value="2" />2
    //     <input type="checkbox" name=" aa " value="3" />3
    //     <input type="button" onclick="abc()" value="提 交" />
    //     <div id="allselect"></div>
    // </div>
        function abc(){
            var str =''
            $('#allselect').siblings(':checked').each(
                function () {
                    str+=$(this).val()+' ';
                }
            )
            console.log(str);
        }
    console.log(`======= 第7题 =======`);
    /*
    8、题目描述
    实现sel函数显示当前选项的文本和值
    <div>
        <form name="a">
            <select name="a" size="1" onchange="_sel(this)">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>
    </div>
    function getOptionVal(){
    
    }
    */
  
    console.log(`======= 第8题 =======`);
    function getOptionVal(){
            console.log($('select').val()+' '+$(':selected').text());
    }
    /*
    9、题目描述
    要求用jQuery完成:  点击id为btn的按钮
    
    a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
    
    b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
    
    HTML结构如下：
    <div>
        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
       确认密码：<input type="password" id="password1"/><br/>
        <button id="btnSubmit" type="button">提交</button><br/>
    </div>
    */
    function register() {
        if ($('#username').val()=='') {
            alert('用户名不能为空')
        }else if (($('#password').val().length)<6) {
            alert('你输入的密码长度不可以少于6位')
        }else if ($('#password').val()!=$('#password1').val()) {
            alert('你输入的密码不相同')
        }
    }
    console.log(`======= 第9题 =======`);
    /*
    10、题目描述
    
    在下面的HTML文档中，编写函数test() ,实现如下功能：
    
    （1）当多行文本框中的字符数超过20个，只截取20个字符
    
    （2）在id为number的td中显示文本框的字符个数
    
    HTML结构如下：
    <table>
        <tr>
            <td>留言</td>
            <td id="number"> 0 </td>
        </tr>
        <tr>
            <td colspan=2>
                <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
            </td>
        </tr>
    </table>
    
    
    function test(){
        
    }
    */
    function test(){
        var len=$('#feedBack').val().length
        if (len>20) {
            $('#feedBack').val($('#feedBack').val().slice(0,20))
        }
        len=$('#feedBack').val().length
        $('#number').text(len)
    }
    console.log(`======= 第10题 =======`);
</script>
</html>